<template>
  <div class="box">
    <div class="content">
      <!-- 头部 -->
      <div class="content_top">
        <h3 style="margin-left: 30px;font-size: 20px;">新建住户</h3>
      </div>
      <!-- 基础信息 -->
      <div class="content_middle">
        <p style="margin: 20px 0 0 40px;">基础信息</p>
        <el-form :model="holdForm" :rules="rules" ref="ruleForm"  label-width="100px" class="demo-villageForm">
          <el-form-item label="关联房屋" prop="house">
            <el-cascader
              style="width: 400px"
              v-model="holdForm.house"
              :props="defaultProps"
              :options="house"
              @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="住户姓名" prop="hname">
            <el-input v-model="holdForm.hname" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="住户编号" prop="hnumber">
            <el-input v-model="holdForm.hnumber" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="住户性别">
            <el-radio v-model="holdForm.hsex" :label="1">男</el-radio>
            <el-radio v-model="holdForm.hsex" :label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="证件类型" prop="documentType">
            <el-select v-model="holdForm.documentType" style="width: 400px;" placeholder="请选择">
              <el-option
                v-for="item in documentType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="documentNumber">
            <el-input v-model="holdForm.documentNumber" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="与业主关系" prop="relation">
            <el-select v-model="holdForm.relation" style="width: 400px;" placeholder="请选择">
              <el-option
                v-for="item in relation"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="hphone">
            <el-input v-model="holdForm.hphone" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" style="width: 400px;" v-model="holdForm.back"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="backspace">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueVillageAdd',

  data() {
    // 身份证号校验
    var checkIdNum = (rule, value, callback) => {
      const reg =
        /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
      if (!value) {
        return callback(new Error('证件号码不能为空'))
      } else if (!reg.test(value)) {
        return callback(new Error('证件号码不正确'))
      } else {
        callback()
      }
    }
    return {
      house: [],
      documentType: [{
        value: '身份证',
        label: '身份证'
      }, {
        value: '港澳通行证',
        label: '港澳通行证'
      }, {
        value: '护照',
        label: '护照'
      }, {
        value: '其他',
        label: '其他'
      }],
      relation: [{
        value: '本人',
        label: '本人'
      }, {
        value: '亲属',
        label: '亲属'
      }, {
        value: '朋友',
        label: '朋友'
      }, {
        value: '租户',
        label: '租户'
      }, {
        value: '其他',
        label: '其他'
      }],
      holdForm : {
        villageId: window.sessionStorage.getItem('vid'),
        hname: '',
        hsex: null,
        hnumber: '',
        documentType: '',
        documentNumber: '',
        house: '',
        relation: '',
        hphone: '',
        back: ''
      },
      rules: {
        house: [
          { required: true, message: '请选择房屋', trigger: 'change' }
        ],
        hname: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        hnumber: [
          { required: true, validator: this.validateTitle, trigger: 'blur' }
        ],
        documentType: [
          { required: true, message: '请选择证件类型', trigger: 'blur' }
        ],
        documentNumber: [
          { required: true, message: '请输入证件号', trigger: 'blur' },
          { validator: checkIdNum, trigger: 'blur' }
        ],
        relation: [
          { required: true, message: '请选择与业主关系', trigger: 'blur' }
        ],
        hphone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'building',
        value: 'building'
      }
    }
  },

  mounted() {
    this.listHouse()
  },

  methods: {
    listHouse(){ // 关联房屋
      this.$axios.get('/memberCjq/household/listHouse',{
        params:{
          cid: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        this.house = res.data
      })
    },
    validateTitle (rules, value, callback) { // 判断住户编号是否重复
      if (!value) {
        callback(new Error('请输入编号'))
      } else {
        this.$axios.get('/memberCjq/household/listhnumber', {
          params: {
            hnumber: value,
            villageId: window.sessionStorage.getItem('vid')
          }
        }).then(res => {
          if (res.data.obj.flag) {
            callback(new Error('此编号已存在!'))
          } else {
            callback()
          }
        })
      }
    },
    submitForm(formName) { // 添加住户信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.holdForm.house = this.holdForm.house.join(',')
          this.$axios.post('/memberCjq/household/saveHouseHold', this.holdForm).then(res => {
            if (res.data.flag){
              this.MyMessage('添加成功!', 'success')
              this.insertLog('添加住户信息')
              this.holdForm = {
                villageId: window.sessionStorage.getItem('vid'),
                hname: '',
                hsex: '',
                hnumber: '',
                documentType: '',
                documentNumber: '',
                house: '',
                relation: '',
                hphone: '',
                back: ''
              }
            } else {
              this.MyMessage('添加失败，请联系管理员', 'warning')
            }
          })
        } else {
          console.log('error submit!!')
          this.MyMessage('系统有误，请联系管理员!', 'error')
          return false
        }
      })
    },
    backspace(){
      this.$router.push('/household')
    },
    handleChange(value) {
      console.log(value);
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 1000px;
  font-family: '微软雅黑';
  background: #F0F2F5;
}
.content{
  width: 1200px;
  margin: 0 auto;
  padding-top: 25px;
}
.content_top{
  width: 100%;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  background: #FFF;
}
.content_middle{
  width: 100%;
  height: 800px;
  background: #FFF;
  overflow: hidden;
  margin-top: 20px;
}
.demo-villageForm{
  width: 610px;
  height: 100%;
  margin: 0 auto;
  margin-top: 40px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  border: 1px dashed #d9d9d9;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.content_botton{
  width: 1200px;
  height: 300px;
  margin-top: 20px;
  overflow: hidden;
  background: #FFF;
}
::v-deep(.el-upload--picture-card){
  width: 120px;
  height: 120px;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item){
  width: 120px;
  height: 120px;
}
::v-deep(.el-icon-plus){
  position: relative;
  top:-7px;
}
</style>
